<template>
  <view class="create-elevator">
    <uni-forms ref="form" :modelValue="formData" :rules="rules">
      <uni-forms-item label="建筑物" name="building" required>
        <uni-easyinput v-model="formData.building" placeholder="请输入建筑物名称" />
      </uni-forms-item>
      
      <uni-forms-item label="位置" name="location" required>
        <uni-easyinput v-model="formData.location" placeholder="请输入具体位置" />
      </uni-forms-item>
      
      <uni-forms-item label="型号" name="model" required>
        <uni-easyinput v-model="formData.model" placeholder="请输入电梯型号" />
      </uni-forms-item>
      
      <uni-forms-item label="厂商" name="manufacturer" required>
        <uni-easyinput v-model="formData.manufacturer" placeholder="请输入厂商名称" />
      </uni-forms-item>
      
      <uni-forms-item label="安装日期" name="installationDate" required>
        <uni-datetime-picker v-model="formData.installationDate" type="date" />
      </uni-forms-item>
      
      <uni-forms-item label="维护周期(天)" name="maintenanceInterval" required>
        <uni-easyinput v-model="formData.maintenanceInterval" type="number" placeholder="请输入维护周期" />
      </uni-forms-item>
      
      <uni-forms-item label="状态" name="status" required>
        <uni-data-select v-model="formData.status" :localdata="STATUS_OPTIONS" />
      </uni-forms-item>
    </uni-forms>
    
    <view class="form-actions">
      <button class="submit-btn" @click="handleSubmit">创建电梯</button>
      <button class="cancel-btn" @click="handleCancel">取消</button>
    </view>
  </view>
</template>

<script>
import { request } from '@/utils/request'

const STATUS_OPTIONS = [
  { value: 'RUNNING', text: '运行中' },
  { value: 'STOPPED', text: '已停止' },
  { value: 'MAINTENANCE', text: '维护中' },
  { value: 'FAULT', text: '故障' }
]

export default {
  data() {
    return {
      STATUS_OPTIONS,
      formData: {
        building: '',
        location: '',
        model: '',
        manufacturer: '',
        installationDate: '',
        maintenanceInterval: '',
        status: 'STOPPED'
      },
      rules: {
        building: {
          rules: [{ required: true, errorMessage: '请输入建筑物名称' }]
        },
        location: {
          rules: [{ required: true, errorMessage: '请输入具体位置' }]
        },
        model: {
          rules: [{ required: true, errorMessage: '请输入电梯型号' }]
        },
        manufacturer: {
          rules: [{ required: true, errorMessage: '请输入厂商名称' }]
        },
        installationDate: {
          rules: [{ required: true, errorMessage: '请选择安装日期' }]
        },
        maintenanceInterval: {
          rules: [{ required: true, errorMessage: '请输入维护周期' }]
        },
        status: {
          rules: [{ required: true, errorMessage: '请选择电梯状态' }]
        }
      }
    }
  },
  
  methods: {
    async handleSubmit() {
      try {
        // 表单验证
        const valid = await this.$refs.form.validate()
        if (!valid) return
        
        // 创建电梯
        await request({
          url: '/api/elevators',
          method: 'POST',
          data: this.formData
        })
        
        uni.showToast({
          title: '创建成功',
          icon: 'success'
        })
        
        // 返回列表页
        uni.navigateBack()
      } catch (err) {
        uni.showToast({
          title: '创建失败',
          icon: 'none'
        })
      }
    },
    
    handleCancel() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.create-elevator {
  padding: 20px;
  background-color: #fff;
}

.form-actions {
  margin-top: 30px;
  display: flex;
  gap: 15px;
}

.submit-btn,
.cancel-btn {
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
}

.submit-btn {
  background-color: #007AFF;
  color: #fff;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}
</style> 